<mat-form-field class="example-form-field">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="datepicker" />
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="datepicker"></mat-datepicker-toggle>
  <!-- #docregion datepicker-actions -->
  <mat-datepicker #datepicker>
    <mat-datepicker-actions>
      <button matButton matDatepickerCancel>Cancel</button>
      <button matButton="elevated" matDatepickerApply>Apply</button>
    </mat-datepicker-actions>
  </mat-datepicker>
  <!-- #enddocregion datepicker-actions -->
</mat-form-field>

<mat-form-field class="example-form-field">
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [rangePicker]="rangePicker">
    <input matStartDate placeholder="Start date" />
    <input matEndDate placeholder="End date" />
  </mat-date-range-input>
  <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="rangePicker"></mat-datepicker-toggle>
  <!-- #docregion date-range-picker-actions -->
  <mat-date-range-picker #rangePicker>
    <mat-date-range-picker-actions>
      <button matButton matDateRangePickerCancel>Cancel</button>
      <button matButton="elevated" matDateRangePickerApply>Apply</button>
    </mat-date-range-picker-actions>
  </mat-date-range-picker>
  <!-- #enddocregion date-range-picker-actions -->
</mat-form-field>
